<template>
    <div>
        <Row class="menu-header">
            <Col span="5" style="text-align: left;">
                <img class="index-icon2" src="../../assets/index/i-icon3.png">
                <span class="index-title"><strong>限时优惠</strong></span>
                <span class="index-desc">/ Flash Sale</span>
            </Col>
            <Col span="16" offset="3">
                <Row type="flex" justify="center">
                    <Col span="22">

                    </Col>
                    <Col span="2">
                        <Button type="text">查看更多></Button>
                    </Col>
                </Row>

            </Col>
        </Row>
        <Row type="flex" justify="center" style="margin-top: 20px">
            <Col span="8" v-for="i in sales" :key="i.id" style="padding: 0.4%">
                <Card class="flash-sale">
                    <Row>
                        <Col span="8">
                            <img :src="i.pic" class="flash-img">
                        </Col>
                        <Col span="16">
                            <div class="f-content">
                                <div class="flash-title flash-f">
                                    {{i.title}}
                                </div>
                                <div class="content-seller flash-f">
                                    销量：{{i.sellerVolume}}
                                </div>
                                <div class="content-seller content-price flash-f">
                                    <span style="font-weight: 600">限时价:</span>
                                    <span style="color: red"><strong>￥{{i.newPrice}} &nbsp; </strong></span>
                                    <span style="text-decoration:line-through"> ￥{{i.oldPrice}}</span>
                                </div>
                                <div style="margin-top: 3.5%">
                                    <Row>
                                        <Col span="10">
                                            <el-button type="primary" plain size="mini">立即抢购</el-button>
                                        </Col>
                                        <Col span="10" offset="4">
                                            <div class="content-seller-name" @click="userInfo(i.sellerId)">
                                                <Avatar style="float: left" size="small" :src="i.avatar"/>
                                                <div style="float: left ;margin-left: 0.3rem">
                                                    {{i.sellerName}}
                                                </div>
                                            </div>
                                        </Col>
                                    </Row>

                                </div>

                            </div>


                        </Col>
                    </Row>

                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        name: "flashSale",
        data() {
            return{
                sales: [
                    {id:1,title:"《都挺好》中隐藏的中国人性格密码",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot6.jpeg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id:2,title:"高情商沟通课：教你建立舒服的关系",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot3.jpeg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id:3,title:"手把手教你成为K歌之王",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot5.jpeg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id:4,title:"掌握人生的20堂职场课：成为不可取代的自己",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot7.jpg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id:5,title:"拆锦囊-----尽显人生智慧的60个锦囊妙计",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot9.jpeg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id:6,title:"品牌与营销：从入门到精通",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot11.jpeg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id:7,title:"如何抓住0~6岁敏感期，培养孩子受益一生的好习惯？",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot10.jpeg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id:8,title:"1节课教你资产五年翻倍！",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot4.jpeg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id:9,title:"最好的爱叫做好好说话：所有不美好的行为都是在呼唤爱",sellerName:"苏大强",oldPrice:12.5, newPrice: 5.5, pic:require("../../assets/hotRecommend/hot1.jpeg"),sellerVolume: 1287,sellerId:12,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"}
                ]
            }
        },
        methods: {
            userInfo (userId) {
                this.$Message.info("卖家的id为" + userId);
            }
        }
    }
</script>

<style scoped>
.flash-sale{
    width:100%;
    text-align: left;
    cursor: pointer;
}
.flash-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    padding: 2px 0 0 0;
}
    .f-content{
        padding-left: 4%;
    }
.flash-f {
    padding-bottom: 4%;
}
    .flash-img{
        width: 100%;
        height: 7.6rem;
        border-radius: 5%;
    }
    .flash-img:hover{
        transform: scale(1.03);
    }
.content-seller-name{
    padding-top: 5%;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    float: left;
}
.content-seller-name /deep/ .ivu-avatar-small{
    width: 18px;
    height: 18px;
}
</style>